<template>
  <div class="movie-list">
    <div class="most-expected" v-html="mostExpected"></div>
    <MovieList :movie-list="movieList"></MovieList>
  </div>
</template>
<script>
import MovieList from "@/components/MovieList";
export default {
  props: {
    movieList: Array,
  },
  data() {
    return {
      mostExpected: "",
    };
  },
  components: {
    MovieList,
  },
  async mounted() {
    let result = await this.$http.get({
      url: "/ajax/topRatedMovies",
    });
    this.mostExpected = result;
  },
};
</script>

<style scoped lang="stylus">
.most-expected
  padding-right:15px;
  margin-top:1px;
>>> .top-rated
    padding: 12px 0 12px 15px;
    background-color: #fff;
    margin-bottom: 10px;
    .title
      margin: 0;
      font-size: 14px;
      color: #333;
      margin-bottom: 12px;
    .top-rated-list
      overflow: scroll;
      white-space: nowrap;
      .top-rated-item
        display: inline-block;
        width: 85px;
        overflow: hidden;
        margin-right: 10px;
        .poster
          width: 85px;
          height: 115px;
          position: relative;
          margin-bottom: 6px;
          img
            width:100%
          .wish-bg
            display: inline-block;
            width: 100%;
            height: 35px;
            position: absolute;
            bottom: 0;
            background-image: -webkit-linear-gradient(top,rgba(77,77,77,0),#000);
            background-image: linear-gradient(-180deg,rgba(77,77,77,0),#000);
          .score
            position: absolute;
            left: 4px;
            bottom: 2px;
            color: #faaf00;
            font-size: 11px;
            font-weight: 600;
        .default-img-bg
           background-color: #e1e1e1;
           background-size: 100% 100%;
        .name
          margin: 0;
          font-size: 13px;
          color: #222;
          margin-bottom: 3px;
        .line-ellipsis
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
</style>
